﻿<script>
    $(document).ready(function () {
        $('#dataTable').dataTable({
            "bProcessing": true,
            "sAjaxSource": '/Content/json/giftCard.txt',
            "bSort": false,
            "bFilter": false,
            "bLengthChange": false,
            "aoColumns": [
                 { "mDataProp": "No", "sTitle": "Card No." },
                 { "mDataProp": "Create On", "sTitle": "Create On", "sWidth": "120px" },
                 { "mDataProp": "Buyer", "sTitle": "Buyer" },
                 { "mDataProp": "Value", "sTitle": "Value" },
                 { "mDataProp": "Balance", "sTitle": "Balance" },
                 { "mDataProp": "Status", "sTitle": "Status" },
                 { "mDataProp": null, "sTitle": "Action", "sWidth": "100px",
                     "fnRender": function (o, val) {
                         return "<a href='#'>View Log</a>";
                     }
                 }
            ]
        });
    });
</script>
<div class="grid_14">
    <a href="/">Home</a> &gt; <a href="#">Sales</a> &gt; Gift Cards
    <hr />
</div>
<div class="grid_14">
    <div class="box">
        <h2>Gift Cards</h2>
        <fieldset id="orderFilter">
            <legend>Filter</legend>
            <p><label>Status:</label><select><option>All Status...</option></select></p>
            <p><label>Card No.:</label><input value="12345678901234"/></p>
        </fieldset>
        <div style="font-weight:bold;padding-top:10px;padding-bottom:10px;">
            <label>Total Value: </label>$100.00&nbsp;&nbsp;&nbsp;
            <label>Total Balance: </label>$45.00
        </div>
        <table id="dataTable"></table>
        <div class="clear"></div>
    </div>
</div>